<template>
	<view>
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<!-- 订单详情 -->
		<view class="orderDetail">
			<view class="info">
				<view class="line">订单编号：{{data.tradeNo}}</view>
				<view class="line">订单金额：<text class="fc-orange">￥{{data.moneyStr}}</text></view>
				<view class="line">订单模式：{{data.costMode==1?'定时定量':'充满既停'}}</view>
				<view class="line" v-if="data.endDate">结束时间：{{data.endDate}}</view>
				<view class="line">开始时间：{{data.startDate||'-'}}</view>
				<view class="refundBtn one">{{data.businessOrderStateName||'-'}}</view>
			</view>
			<view class="mod flex justify-between align-center" @click="$utils.toURL('/order/cdcz/operate?tradeNo='+data.tradeNo+'&createDate='+data.createDate)">
				<view><text class="cuIcon-settingsfill text-my margin-right-xs"></text>查看订单日志记录</view>
				<text class="cuIcon-right text-gray"></text>
			</view>
			<!-- 设备信息 -->
			<view class="mod">
				<view class="tit"><text class="cuIcon-lightfill text-my margin-right-xs"></text>设备信息</view>
				<view class="con">
					<view class="line">
						<view class="key">设备类型</view><view class="value">{{data.deviceTypeName||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">卡槽序号</view><view class="value">{{data.slotNum||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">设备状态</view><view class="value">{{data.stateName||'--'}}</view>
					</view>
				</view>
				<!-- 折线图 -->
				<view class="tables">
					<block v-if="table1.categories && table1.categories.length>0">
						<view class="title" @click="$utils.toURL('/order/cdcz/chart?type=0&tradeNo='+data.tradeNo+'&createDate='+data.createDate)">
							<text>插座瞬时功率</text>
							<text class="icon cuIcon-full margin-left-sm"></text>
						</view>
						<uni-chart-area :res="table1"></uni-chart-area>
					</block>
					<block v-if="table2.categories && table2.categories.length>0">
						<view class="title" @click="$utils.toURL('/order/cdcz/chart?type=1&tradeNo='+data.tradeNo+'&createDate='+data.createDate)">
							<text>插座瞬时电流</text>
							<text class="icon cuIcon-full margin-left-sm"></text>
						</view>
						<uni-chart-areas :res="table2"></uni-chart-areas>
					</block>
				</view>
			</view>
			
			<!-- 套餐信息 -->
			<view class="mod">
				<view class="tit"><text class="cuIcon-circlefill text-my margin-right-xs"></text>套餐信息</view>
				<view class="con">
					<view class="line">
						<view class="key">最大使用时间</view>
						<view class="value">{{data.maxUseTimes}}分钟</view>
					</view>
					<view class="line">
						<view class="key">最大充电电量</view>
						<view class="value">{{data.maxUseChargeElectricity}}千瓦时</view>
					</view>
					<view class="line">
						<view class="key">实际使用时间</view>
						<view class="value">{{data.useTimes}}分钟</view>
					</view>
					<view class="line">
						<view class="key">实际充电电量</view>
						<view class="value">{{data.useChargeElectricity}}千瓦时</view>
					</view>
				</view>
			</view>
			
			<!-- 支付信息 -->
			<view class="mod">
				<view class="tit"><text class="cuIcon-newshotfill text-my margin-right-xs"></text>支付信息</view>
				<view class="con">
					<view class="line">
						<view class="key">用户名称</view>
						<view class="value">{{data.memberName||'--'}}({{data.memberId}})</view>
					</view>
					<view class="line">
						<view class="key">支付方式</view>
						<view class="value" v-if="data.payType==1">钱包余额</view>
						<view class="value" v-else-if="data.payType==3">微信支付</view>
						<view class="value" v-else>其他</view>
					</view>
					<view class="line">
						<view class="key">支付状态</view>
						<view class="value">{{data.payStateName}}</view>
					</view>
					<view class="line">
						<view class="key">支付金额</view>
						<view class="value fc-orange">{{data.moneyStr||'--'}}元</view>
					</view>
					<view class="line">
						<view class="key">优惠金额</view>
						<view class="value">{{data.discountMoney||'--'}}元</view>
					</view>
					<view class="line">
						<view class="key">支付时间</view>
						<view class="value">{{data.createDate||'--'}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 交互框 -->
		<view class="cu-modal modal" :class="(modalName=='refund'||modalName=='cancel'||modalName=='finish')?'show':''">
		  <view class="cu-dialog bg-white">
			  <view class="head" v-if="modalName=='refund'">退部分金额</view>
			  <view class="head" v-else-if="modalName=='cancel'">撤销订单</view>
			   <view class="head" v-else>完成订单</view>
			  <view class="content">
			  	<view class="money" v-if="(modalName!='cancel')">￥<input type="digit" v-model="Money"></view>
				<view><input type="text" placeholder="退款说明" v-model="Note"></view>
			  </view>
			  <view class="footer">
			  	<view @click="modalName=null">取消</view>
				<view class="confirm" v-if="modalName=='refund'" @click="btnRefund">退款</view>
				<view class="confirm" v-else-if="modalName=='cancel'" @click="btnCancel">撤销</view>
				<view class="confirm" v-else @click="btnFinish">完成</view>
			  </view>
		  </view>
		</view>
		
		<view style="height: 120rpx;"></view>
		<view class="footBar" v-if="data.payState!=4 && handle">
			<!-- <view class="icon" @click="$utils.toURL('/order/cdcz/log')">日志</view> -->
			<view class="button light" v-if="data.state==5" @click="btnOpenModal('refund')">部分退款</view>
			<view class="button light" v-else @click="btnOpenModal('finish')">完成订单</view>
			<view class="button" @click="modalName = 'cancel'">撤销</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tradeNo:'订单号',
				createDate:null,
				Money:0,
				Note:'',
				//通用
				data:{},
				modalName:null,
				table1:{},
				table2:{},
				handle:true
			}
		},
		onLoad(option) {
			if(option.hd==0){
				this.handle=false
			}
			this.tradeNo = option.tradeNo;
			this.createDate = option.createDate;
		},
		onShow() {
			this._loadOrderInfo();
		},
		methods: {
			_loadOrderInfo:function(){
				const api = this.$request;
				const self = this;
				api.post(api.url.cdczOrderDetail,{
					tradeNo:this.tradeNo,
					createDate:this.createDate
				},(res)=>{
					if(res.code==200){
						self.data = res.body;
						const lineData = res.body.polygonalLineData;
						if(!lineData || !lineData.categories || lineData.categories.length==0) return;
						const dateStr = lineData.categories[lineData.categories.length-1].split(":");
						if(parseInt(dateStr[1])+3>=60){
							dateStr[0] = parseInt(dateStr[0]) + 1;
							dateStr[1] = parseInt(dateStr[1]) -57;
						}else{
							dateStr[1] = parseInt(dateStr[1]) + 3;
						}
						//前后两段第一个点为0
						lineData.categories.push(dateStr[0]+":"+dateStr[1])
						lineData.series[0].data.push(0);
						lineData.series[1].data.push(0);
						lineData.series[0].data[0]=0;
						lineData.series[1].data[0]=0;
						console.log(lineData)
						self.table1 = {
							categories : lineData.categories,
							series : [{
								name:lineData.series[0].name,
								data:lineData.series[0].data
							}]
						};
						self.table2 = {
							categories : lineData.categories,
							series : [{
								name:lineData.series[1].name,
								data:lineData.series[1].data
							}]
						}
					}
				})
			},
			btnOpenModal(type){
				this.modalName = type;
				const {moneyStr} = this.data;
				this.Money = moneyStr;
			},
			//退部分
			btnRefund(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.cdczOrderRefund,{
					tradeNo:self.data.tradeNo,
					createDate:self.data.createDate,
					money:self.Money,
					note:self.Note
				},(res)=>{
					console.log(res)
					if(res.code==200){
						setTimeout(function(){
							uni.showToast({
								title:'订单退款成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			//撤销订单
			btnCancel(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.cdczOrderCancel,{
					tradeNo:self.data.tradeNo,
					createDate:self.data.createDate,
					note:self.Note
				},(res)=>{
					console.log(res)
					if(res.code==200){			
						setTimeout(function(){
							uni.showToast({
								title:'撤销订单成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			//完成订单
			btnFinish(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.cdczOrderFinish,{
					tradeNo:self.data.tradeNo,
					createDate:self.data.createDate,
					money:self.Money,
					note:self.Note,
				},(res)=>{
					console.log(res)
					if(res.code==200){
						setTimeout(function(){
							uni.showToast({
								title:'完成订单成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.fc-orange{
		font-weight: 600;
		color: #e85b36;
	}
	.orderDetail {
		// padding: 30rpx 32rpx;
		padding-top:40rpx;
		.info {
			position: relative;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			color: #2F2F2F;
			padding: 30rpx;
		
			.line {
				line-height: 68rpx;
			}
			.refundBtn {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				width: 130rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				background: #f56c6c;
				border-radius: 23rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.tables{
			background-color: white;
			border-radius: 10rpx;
			.title{
				padding-top:20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon{
					color: #fc8452;
					font-weight: 600;
				}
			}
		}
		.mod {
			background: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx 40rpx;
			.tit {
				font-size: 30rpx;
				// font-weight: 600;
				padding-bottom: 10rpx;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
			}
		
		
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				line-height: 68rpx;
				.icon{
					font-weight: 600;
				}
			}
		
			.key {
				font-weight: Medium;
			}
		
			.log {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 0;
			}
		
			.ico-arrow {
				width: 18rpx;
				height: 30rpx;
			}
		}
	}
	.modal{
		.head{
			margin: 40rpx 0 60rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
		.content{
			&>view{
				width: 80%;
				height: 80rpx;
				margin: 0 auto 48rpx;
				border:1rpx solid #e0e0e0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 20rpx;
				font-size: 24rpx;
				input{
					width: 100%;
					height: 80rpx;
					text-align: left;
					font-size: 24rpx;
				}
			}
		}
		.footer{
			display: flex;
			justify-content: center;
			align-items: center;
			&>view{
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				color: #eca768;
				border-top: 1rpx solid #e0e0e0;
			}
			.confirm{
				background:linear-gradient(90deg,#eca768,#e85b36);
				color: #ffffff;
			}
		}
	}
	.footBar{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding:20rpx 20rpx 40rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx #e0e0e0;
		.button{
			color: white;
			background:linear-gradient(90deg,#eca768,#e85b36);
			width: 240rpx;
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 10rpx;
			border-radius: 10rpx;
			&.light{
				background:linear-gradient(270deg,#989898,#272822);
			}
		}
		.icon{
			font-size: 28rpx;
			color: #909090;
			margin-right: 30rpx;
		}
	}
</style>
